<!--
 * @Author: gonghairun
 * @Date: 2020-11-19 10:16:14
 * @LastEditors: zhangyongbing
 * @LastEditTime: 2022-04-20 13:29:59
 * @Description: //筛选组件
-->
<template>
	<div class="selectPageComponent" :style="{ width: width + 'px' }">
		<!-- 分页下拉框 -->
		<el-select
			popper-class="selectClass"
			v-loadmore="loadMore"
			v-model="selectValue"
			:multiple="multiple"
			:collapse-tags="multiple"
			filterable
			size="mini"
			:clearable="true"
			remote
			@change="selectChange"
			@clear="selectClear"
			reserve-keyword
			:placeholder="placeholder"
			:remote-method="remoteMethod"
			:loading="loading"
			:disabled="disabled"
		>
			<el-option v-for="(item, index) in dataList" :key="index" :label="item[label]" :value="item[value]"></el-option>
		</el-select>
	</div>
</template>

<script>
export default {
	name: "headerSelect",
	props: {
		// 宽度
		width: {
			type: Number | String,
			default: 153,
		},
		// 显示名称
		label: {
			type: String,
		},
		// 值
		value: {
			type: String,
		},
		// 修改值
		selectOnChange: {
			type: Function,
		},
		// 初始数据源
		selectList: {
			type: Array,
		},
		// 默认值
		selectValue: {
			type: String | Array,
		},
		// placeholder
		placeholder: {
			type: String,
		},
		// 链接地址
		url: {
			type: String,
		},
		// 是否多选
		multiple: {
			type: Boolean,
			default: false,
		},
		// 是否客户数据
		customer: {
			type: Boolean,
			default: false,
		},
		// 是否操作方式
		selectOperation: {
			type: Boolean,
			default: false,
		},
		// 是否禁用
		disabled: {
			type: Boolean,
			default: false,
		},
	},
	components: {},
	data() {
		return {
			loading: false, //数据加载
			keyword: "", // 关键字
			pageNum: 1, //
			totalPageNum: "", // 总页数
			dataList: [],
		}
	},
	created() {},
	watch: {
		/**
		 * @Author: gonghairun
		 * @description: 监听下拉框数据
		 * @param {*}
		 * @return {*}
		 */
		selectList: {
			handler(value) {
				if (value && value.length != 0) {
					console.log(this.selectValue, "dataList")
					console.log(this.dataList, "dataList")
					this.dataList = value
				}
			},
			immediate: true,
		},
	},
	mounted() {},
	methods: {
		/**
		 * @Author: gonghairun
		 * @description:模糊查询
		 * @param {*}
		 * @return {*}
		 */
		remoteMethod(query) {
			this.loading = true
			this.keyword = query || "" //保存搜索关键字
			this.pageNum = 1 //页数至1
			this.totalPageNum = 0 //页码至0
			this.dataList = [] //列表值空
			if (query !== "") {
				this.loading = false
				setTimeout(async () => {
					this.loading = false
					this.getDataList(query)
				}, 300)
			} else {
				this.loading = false
				this.getDataList("")
			}
		},
		/**
		 * @Author: gonghairun
		 * @description: 下拉加载
		 * @param {*}
		 * @return {*}
		 */
		loadMore() {
			this.pageNum++
			if (this.totalPageNum < this.pageNum) {
				return
			}
			this.getDataList(this.keyword)
		},
		/**
		 * @Author: gonghairun
		 * @description: 修改
		 * @param {*}
		 * @return {*}
		 */
		selectChange(value) {
			let label = !this.multiple ? this.dataList.filter(item => item[this.value] === value)[0][this.label] : ""
			this.selectOnChange(value == "" ? "" : value, value == "" ? "" : label, this.dataList)
		},
		/**
		 * @Author: gonghairun
		 * @description: 清空
		 * @param {*}
		 * @return {*}
		 */
		selectClear() {
			this.keyword = "" //保存搜索关键字
			this.pageNum = 1 //页数至1
			this.totalPageNum = 0 //页码至0
			this.dataList = [] //列表值空
			let selectModel = document.querySelector(".selectClass").childNodes[0].childNodes[0]
			let selectScroll = document.querySelector(".selectClass").childNodes[0].childNodes[2].childNodes[0]
			selectModel.scrollTop = 0
			selectScroll.style.transform = "translateY(" + 0 + "%)"
			this.selectOnChange("", "")
		},
		/**
		 * @Author: gonghairun
		 * @description: 获取船代数据
		 * @param {*} keyword
		 * @return {*}
		 */
		getDataList(keyword) {
			const _this = this
			this.$http
				.get(`${_this.url}&keyword=${keyword}&startpage=${_this.pageNum}&pagesize=20`)
				.then(res => {
					console.log(res)
					if (this.customer) {
						_this.dataList = [..._this.dataList, ...res.data.data.pages]
						_this.totalPageNum = res.data.data.totalPageNum
					} else if (this.selectOperation) {
						_this.dataList = [..._this.dataList, ...res.data.data]
						_this.totalPageNum = res.data.data.length
					} else {
						_this.dataList = [..._this.dataList, ...res.data.data.result.pages]
						_this.totalPageNum = res.data.data.result.totalPageNum
					}
				})
				.catch(error => {})
		},
	},
}
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
